<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/css/webuploader.css">
    <title>Document</title>
    <style>
        .form-container {
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            width: 100%;
        }

        .form legend {
            text-align: center;
        }

        .form {
            width: 30%;
            line-height: 30px;
        }

        .form .upload {

            position: relative;
            margin: 0 30px;
            float: right;
            width: 60px;
            height: 60px;
            border: 1px solid gray;

        }

        .upload input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .upload span {
            cursor: pointer;
            text-align: center
        }

        #checkOne select{
            width: 160px;
            display: block
        }

        #checkOne,
        #checkMore {
            display: none;
            line-height: 40px;
        }



        @media (max-width:720px) {
            .form {
                width: 70%;
            }
        }

        @media (max-width:560px) {
            .form {
                width: 90%;
            }
        }
    </style>
</head>

<body>
<section class="form-container">
    <form action="" class="form">
        <fieldset>
            <legend>表单标题</legend>
            <p>简介</p>

            <input type="checkbox" value="" id="radio" />是否使用单选框
            <div class="upload">
                <input type="file" />
                <span>上传图片</span>
            </div>
            <div id="checkOne">
                <input type="text" placeholder="填写元素内容" />
                <select name="">
                    <option value="1" selected>1</option>
                    <option></option>
                </select>
            </div>
            <br/>
            <input type="checkbox" value="" id="checkbox" />是否使用多选框
            <br />
            <div id="checkMore">
                <input type="text" />
                <br />
                <div id="start">
                    <input type="text" placeholder="起始时间" disabled>
                </div>
                <div id="end">
                    <input type="text" placeholder="终止时间" disabled>
                </div>
            </div>
            <button>提交</button>

        </fieldset>
    </form>
</section>
</body>
<script src="/js/jQuery/jquery-2.2.3.min.js"></script>
<script src="/js/datepicker.js"></script>
<script type="text/javascript" src="/js/webuploader.js"></script>
<script>

    (function (win) {
        function load() {

            const radio = document.getElementById('radio')
            const checkbox = document.getElementById('checkbox')
            const checkOne = document.getElementById('checkOne')
            const checkMore = document.getElementById('checkMore')
            const start = document.getElementById('start')
            const end = document.getElementById('end')
            radio.addEventListener('click', function (e) {
                if (radio.checked == true) {
                    checkOne.style.display = 'block'
                }
                else {
                    checkOne.style.display = 'none'
                }
                return false
            })
            checkbox.addEventListener('click', function () {
                if (checkbox.checked == true) {
                    checkMore.style.display = 'block'
                }
                else {
                    checkMore.style.display = 'none'
                }
                return false
            })
        }
        let startCalendar = new datePicker()
        let endCalendar = new datePicker()
        startCalendar.init({
            'trigger': '#start', /*按钮选择器，用于触发弹出插件*/
            'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
            'minDate': new Date(),/*最小日期*/
            'maxDate': '2100-12-31',/*最大日期*/
            'onSubmit': function () {/*确认时触发事件*/
                start.getElementsByTagName('input')[0].value = startCalendar.value;
                endCalendar.init({
                    'trigger': '#end',
                    'type': 'date',
                    'minDate': startCalendar.value,
                    'maxDate': '2100-12-31',
                    'onSubmit': () => {
                    end.getElementsByTagName('input')[0].value = endCalendar.value
            }
            })

            },
            'onClose': function () {/*取消时触发事件*/
            }
        })

        win.addEventListener('DOMContentLoaded', load)

    })(window, undefined)
</script>

</html>